<script setup>
import { ref, reactive, onMounted } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();
const patientId = route.params.id;

// Patient data
const patient = ref({
  id: 'P10001',
  name: '张三',
  gender: '男',
  age: 45,
  birthdate: '1978-09-15',
  phone: '13800138001',
  address: '北京市海淀区中关村南大街5号',
  emergencyContact: '张四 (兄弟) 13900139999',
  bloodType: 'A型',
  allergyHistory: '青霉素过敏',
  status: '活跃',
  createdDate: '2022-03-15',
  insuranceType: '城镇职工医保',
  insuranceId: '110108197809150057',
  medicalRecordNo: 'MR202203150032',
  doctorInCharge: '王医生 (内科)',
  riskLevel: '中等'
});

// 就诊记录
const visitRecords = ref([
  {
    id: 'V100125',
    date: '2023-06-15',
    department: '内科',
    doctor: '王医生',
    diagnosis: '高血压',
    treatmentPlan: '降压药物治疗与生活方式调整',
    nextAppointment: '2023-07-15',
    status: '已完成'
  },
  {
    id: 'V100078',
    date: '2023-05-10',
    department: '内科',
    doctor: '王医生',
    diagnosis: '上呼吸道感染',
    treatmentPlan: '抗生素治疗与休息',
    nextAppointment: '',
    status: '已完成'
  },
  {
    id: 'V100043',
    date: '2023-03-20',
    department: '内科',
    doctor: '王医生',
    diagnosis: '体检',
    treatmentPlan: '血压监测',
    nextAppointment: '2023-04-20',
    status: '已完成'
  }
]);

// 当前用药情况
const medications = ref([
  {
    name: '厄贝沙坦片',
    dosage: '150mg',
    frequency: '每日一次',
    startDate: '2023-06-15',
    endDate: '长期',
    prescribedBy: '王医生',
    notes: '早上服用'
  },
  {
    name: '阿司匹林肠溶片',
    dosage: '100mg',
    frequency: '每日一次',
    startDate: '2023-06-15',
    endDate: '长期',
    prescribedBy: '王医生',
    notes: '晚上服用'
  }
]);

// 检查检验结果
const labResults = ref([
  {
    id: 'LR10089',
    date: '2023-06-15',
    type: '血常规',
    result: '正常',
    doctor: '王医生',
    attachment: '血常规报告.pdf'
  },
  {
    id: 'LR10090',
    date: '2023-06-15',
    type: '血压',
    result: '145/95 mmHg',
    doctor: '王医生',
    attachment: ''
  },
  {
    id: 'LR10091',
    date: '2023-06-15',
    type: '血脂',
    result: '总胆固醇偏高',
    doctor: '王医生',
    attachment: '血脂检查报告.pdf'
  }
]);

// 随访计划
const followupPlans = ref([
  {
    id: 'FP1005',
    plannedDate: '2023-07-15',
    type: '复诊',
    department: '内科',
    doctor: '王医生',
    purpose: '血压复查',
    status: '已预约',
    notes: '需空腹'
  }
]);

// 病历记录
const medicalNotes = ref([
  {
    id: 'MN1032',
    date: '2023-06-15',
    author: '王医生',
    content: '患者血压持续偏高，建议加强监测和药物治疗，同时注意饮食控制，减少盐分摄入。',
    type: '诊疗记录'
  },
  {
    id: 'MN1033',
    date: '2023-06-15',
    author: '李护士',
    content: '已告知患者服药注意事项及可能的副作用。',
    type: '护理记录'
  }
]);

// 健康指标
const healthMetrics = ref({
  bloodPressure: [
    { date: '2023-06-15', value: '145/95' },
    { date: '2023-05-10', value: '150/100' },
    { date: '2023-03-20', value: '155/98' }
  ],
  weight: [
    { date: '2023-06-15', value: '78 kg' },
    { date: '2023-05-10', value: '80 kg' },
    { date: '2023-03-20', value: '82 kg' }
  ],
  bloodSugar: [
    { date: '2023-06-15', value: '5.8 mmol/L' },
    { date: '2023-05-10', value: '6.0 mmol/L' },
    { date: '2023-03-20', value: '6.2 mmol/L' }
  ]
});

// 活跃的tab页
const activeTab = ref('overview');
</script>

<template>
  <div>
    <!-- 返回按钮和患者名称 -->
    <div class="page-header">
      <div class="back-button">
        <el-button link type="primary" class="back-link">
          <el-icon><Back /></el-icon>
          返回患者列表
        </el-button>
      </div>
      
      <div class="patient-title">
        <h1 class="patient-name">{{ patient.name }}
          <el-tag v-if="patient.riskLevel === '高'" type="danger" size="small">高风险</el-tag>
          <el-tag v-else-if="patient.riskLevel === '中等'" type="warning" size="small">中等风险</el-tag>
          <el-tag v-else type="success" size="small">低风险</el-tag>
        </h1>
        <span class="patient-id">ID: {{ patient.id }}</span>
      </div>
    </div>
    
    <!-- 患者基本信息卡片 -->
    <div class="card patient-overview">
      <div class="card-body">
        <div class="overview-row">
          <div class="patient-basic-info">
            <div class="info-title">基本信息</div>
            <div class="info-grid">
              <div class="info-item">
                <span class="info-label">性别</span>
                <span class="info-value">{{ patient.gender }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">年龄</span>
                <span class="info-value">{{ patient.age }}岁 ({{ patient.birthdate }})</span>
              </div>
              <div class="info-item">
                <span class="info-label">联系电话</span>
                <span class="info-value">{{ patient.phone }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">血型</span>
                <span class="info-value">{{ patient.bloodType }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">过敏史</span>
                <span class="info-value">{{ patient.allergyHistory }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">医保类型</span>
                <span class="info-value">{{ patient.insuranceType }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">医保卡号</span>
                <span class="info-value">{{ patient.insuranceId }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">病历号</span>
                <span class="info-value">{{ patient.medicalRecordNo }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">负责医生</span>
                <span class="info-value">{{ patient.doctorInCharge }}</span>
              </div>
            </div>
          </div>
          
          <div class="patient-actions">
            <el-button type="primary">
              <el-icon><Edit /></el-icon>
              修改信息
            </el-button>
            <el-button>
              <el-icon><Plus /></el-icon>
              添加就诊记录
            </el-button>
            <el-button>
              <el-icon><Calendar /></el-icon>
              预约随访
            </el-button>
            <el-button>
              <el-icon><Document /></el-icon>
              打印病历
            </el-button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 健康指标卡片 -->
    <div class="card">
      <div class="card-body">
        <div class="card-title">健康指标趋势</div>
        <div class="metrics-container">
          <div class="metric-item">
            <div class="metric-header">
              <h3>血压 (mmHg)</h3>
              <el-tag v-if="healthMetrics.bloodPressure[0].value.split('/')[0] > 140" type="danger">偏高</el-tag>
            </div>
            <div class="metric-chart"></div>
            <div class="metric-table">
              <div class="metric-row" v-for="(item, index) in healthMetrics.bloodPressure" :key="index">
                <span class="metric-date">{{ item.date }}</span>
                <span class="metric-value">{{ item.value }}</span>
              </div>
            </div>
          </div>
          
          <div class="metric-item">
            <div class="metric-header">
              <h3>体重 (kg)</h3>
            </div>
            <div class="metric-chart"></div>
            <div class="metric-table">
              <div class="metric-row" v-for="(item, index) in healthMetrics.weight" :key="index">
                <span class="metric-date">{{ item.date }}</span>
                <span class="metric-value">{{ item.value }}</span>
              </div>
            </div>
          </div>
          
          <div class="metric-item">
            <div class="metric-header">
              <h3>血糖 (mmol/L)</h3>
            </div>
            <div class="metric-chart"></div>
            <div class="metric-table">
              <div class="metric-row" v-for="(item, index) in healthMetrics.bloodSugar" :key="index">
                <span class="metric-date">{{ item.date }}</span>
                <span class="metric-value">{{ item.value }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- Tab导航 -->
    <div class="card tab-card">
      <div class="card-body">
        <el-tabs v-model="activeTab">
          <el-tab-pane label="就诊记录" name="visits">
            <div class="table-header">
              <h3 class="table-title">就诊记录</h3>
              <el-button size="small" type="primary">
                <el-icon><Plus /></el-icon>
                添加就诊记录
              </el-button>
            </div>
            
            <el-table :data="visitRecords" border style="width: 100%">
              <el-table-column prop="date" label="就诊日期" width="120" />
              <el-table-column prop="department" label="科室" width="100" />
              <el-table-column prop="doctor" label="医生" width="100" />
              <el-table-column prop="diagnosis" label="诊断" />
              <el-table-column prop="treatmentPlan" label="治疗方案" />
              <el-table-column prop="nextAppointment" label="下次预约" width="120" />
              <el-table-column label="操作" width="180">
                <template #default="scope">
                  <el-button type="primary" size="small" text>
                    <el-icon><View /></el-icon>
                    详情
                  </el-button>
                  <el-button type="primary" size="small" text>
                    <el-icon><Edit /></el-icon>
                    编辑
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          
          <el-tab-pane label="当前用药" name="medications">
            <div class="table-header">
              <h3 class="table-title">当前用药情况</h3>
              <el-button size="small" type="primary">
                <el-icon><Plus /></el-icon>
                添加用药记录
              </el-button>
            </div>
            
            <el-table :data="medications" border style="width: 100%">
              <el-table-column prop="name" label="药品名称" />
              <el-table-column prop="dosage" label="剂量" width="100" />
              <el-table-column prop="frequency" label="频次" width="120" />
              <el-table-column prop="startDate" label="开始日期" width="120" />
              <el-table-column prop="endDate" label="结束日期" width="120" />
              <el-table-column prop="prescribedBy" label="处方医生" width="120" />
              <el-table-column prop="notes" label="备注" />
              <el-table-column label="操作" width="180">
                <template #default="scope">
                  <el-button type="primary" size="small" text>
                    <el-icon><Edit /></el-icon>
                    编辑
                  </el-button>
                  <el-button type="danger" size="small" text>
                    <el-icon><Delete /></el-icon>
                    停用
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          
          <el-tab-pane label="检查结果" name="labResults">
            <div class="table-header">
              <h3 class="table-title">检查检验结果</h3>
              <el-button size="small" type="primary">
                <el-icon><Plus /></el-icon>
                添加检查结果
              </el-button>
            </div>
            
            <el-table :data="labResults" border style="width: 100%">
              <el-table-column prop="date" label="检查日期" width="120" />
              <el-table-column prop="type" label="检查类型" width="150" />
              <el-table-column prop="result" label="结果" />
              <el-table-column prop="doctor" label="医生" width="100" />
              <el-table-column label="附件" width="120">
                <template #default="scope">
                  <el-button v-if="scope.row.attachment" type="primary" size="small" text>
                    <el-icon><Document /></el-icon>
                    查看
                  </el-button>
                  <span v-else>无</span>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="180">
                <template #default="scope">
                  <el-button type="primary" size="small" text>
                    <el-icon><Edit /></el-icon>
                    编辑
                  </el-button>
                  <el-button type="primary" size="small" text>
                    <el-icon><Upload /></el-icon>
                    上传附件
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          
          <el-tab-pane label="随访计划" name="followup">
            <div class="table-header">
              <h3 class="table-title">随访计划</h3>
              <el-button size="small" type="primary">
                <el-icon><Plus /></el-icon>
                添加随访计划
              </el-button>
            </div>
            
            <el-table :data="followupPlans" border style="width: 100%">
              <el-table-column prop="plannedDate" label="计划日期" width="120" />
              <el-table-column prop="type" label="随访类型" width="100" />
              <el-table-column prop="department" label="科室" width="100" />
              <el-table-column prop="doctor" label="医生" width="100" />
              <el-table-column prop="purpose" label="目的" />
              <el-table-column prop="status" label="状态" width="100">
                <template #default="scope">
                  <el-tag 
                    :type="scope.row.status === '已完成' ? 'success' : 
                          scope.row.status === '已预约' ? 'primary' : 'warning'">
                    {{ scope.row.status }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="notes" label="备注" />
              <el-table-column label="操作" width="180">
                <template #default="scope">
                  <el-button type="primary" size="small" text>
                    <el-icon><Edit /></el-icon>
                    编辑
                  </el-button>
                  <el-button type="success" size="small" text>
                    <el-icon><Check /></el-icon>
                    完成
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          
          <el-tab-pane label="病历记录" name="medicalNotes">
            <div class="table-header">
              <h3 class="table-title">病历记录</h3>
              <el-button size="small" type="primary">
                <el-icon><Plus /></el-icon>
                添加记录
              </el-button>
            </div>
            
            <el-table :data="medicalNotes" border style="width: 100%">
              <el-table-column prop="date" label="日期" width="120" />
              <el-table-column prop="type" label="记录类型" width="120" />
              <el-table-column prop="author" label="作者" width="100" />
              <el-table-column prop="content" label="内容" />
              <el-table-column label="操作" width="180">
                <template #default="scope">
                  <el-button type="primary" size="small" text>
                    <el-icon><View /></el-icon>
                    查看
                  </el-button>
                  <el-button type="primary" size="small" text>
                    <el-icon><Edit /></el-icon>
                    编辑
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<style scoped>
.page-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.back-button {
  margin-right: 16px;
}

.patient-title {
  flex: 1;
}

.patient-name {
  margin: 0;
  font-size: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.patient-id {
  color: var(--text-secondary);
  font-size: 14px;
}

.patient-overview {
  margin-bottom: 20px;
}

.overview-row {
  display: flex;
  gap: 32px;
}

.patient-basic-info {
  flex: 2;
}

.info-title {
  font-weight: bold;
  margin-bottom: 16px;
  font-size: 16px;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.info-item {
  display: flex;
  flex-direction: column;
}

.info-label {
  color: var(--text-secondary);
  font-size: 12px;
  margin-bottom: 4px;
}

.info-value {
  font-size: 14px;
}

.patient-actions {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: flex-start;
}

.card-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
}

.metrics-container {
  display: flex;
  gap: 24px;
}

.metric-item {
  flex: 1;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 16px;
}

.metric-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.metric-header h3 {
  margin: 0;
  font-size: 16px;
}

.metric-chart {
  height: 120px;
  background-color: #f8f9fa;
  margin-bottom: 16px;
  border-radius: 4px;
}

.metric-table {
  font-size: 14px;
}

.metric-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px dashed var(--border-color);
}

.metric-row:last-child {
  border-bottom: none;
}

.metric-date {
  color: var(--text-secondary);
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.table-title {
  margin: 0;
  font-size: 16px;
}

.tab-card {
  margin-bottom: 24px;
}
</style> 